<template>
  <div class="page loading2">
    <div class="loading">
      <span>loading...</span>
    </div>
  </div>
</template>
<script setup>
import {} from "vue";
</script>
<style lang="scss">
.loading2 {
  .loading {
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border-radius: 50%;
    margin: 50px auto;
    border-bottom: 6px solid skyblue;
    line-height: 100px;
    text-align: center;
    position: relative;
    animation: loading2-turn 2s linear infinite;
  }
  .loading span {
    display: block;
    animation: loading2-turn 2s linear infinite reverse;
  }
  .loading:before,
  .loading:after {
    display: block;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    content: '';
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .loading:before {
    border-bottom: 6px solid hotpink;
    transform: rotateZ(120deg);
  }
  .loading:after {
    border-bottom: 6px solid greenyellow;
    transform: rotateZ(-120deg);
  }
  @keyframes loading2-turn {
    from {
      transform: rotateZ(0deg);
    }
    to {
      transform: rotateZ(360deg);
    }
  }
  @keyframes loading2-turn2 {
    from {
      transform: rotateZ(360deg);
    }
    to {
      transform: rotateZ(0deg);
    }
  }
}
</style>